<template>
  <div>
      <div class="head">
      <i class="iconfont icon-left"
         @click="change()"></i>
      <div class="person-center">邮箱注册</div>
      <i class="iconfont icon-menuunfold" @click="display()"></i>
      <ul class="nav" v-show="isActive">
        <li>
          <router-link to="/showss"  :class="'nav-link'">
            <i class="iconfont icon-sanguohome"></i>
            <span>首页</span>
          </router-link>
        </li>
        <li>
          <router-link to="/typess"  :class="'nav-link'">
            <i class="iconfont icon-icon04"></i>
            <span>分类搜索</span>
          </router-link>
        </li>
        <li>
          <router-link to="/shopcarss"  :class="'nav-link'">
            <i class="iconfont icon-shop-cart-"></i>
            <span>购物车</span>
          </router-link>
        </li>
        <li>
          <router-link to="/myss"  :class="'nav-link'">
            <i class="iconfont icon-i-smile"></i>
            <span>我的</span>
          </router-link>
        </li>
      </ul>
    </div>
    <div class="register">
      <div class="phone">
        <p class="num">邮箱</p>
        <input type="text"
               placeholder="请输入邮箱">
      </div>
      <div class="phone">
        <p class="num">设置密码</p>
        <input type="text"
               placeholder="请设置密码">
      </div>
       <div class="phone">
        <p class="num">确认密码</p>
        <input type="text"
               placeholder="请确认账号密码">
      </div>
      <button>注册邮箱账号</button>
      <p class="change"  @click="change()"> 
        <i class="iconfont icon-left"></i>返回登录 </p>
    </div>
  </div>
</template>

<style lang="less" scoped>
.head {
  padding: 0px 20px;
  display: flex;
  justify-content: space-between;
  position: relative;
}
.person-center {
  height: 3.14rem;
  line-height: 3.14285714rem;
  background: #fff;
  font-size: 1.14rem;
  text-align: center;
  line-height: 3.14rem;
  position: relative;
}

.iconfont {
  display: block;
  line-height: 3.14rem;
  font-size: 20px;
}

.register {
  font-size: 0.9rem;
  padding: 0rem 1.4rem;

  .phone {
    border-bottom: 0.07142857rem #e9ecf0 solid;
    margin-top: 1.785rem;
    input {
      padding: 0.5rem 0rem;
      margin-top: 0.3rem;
      width: 70%;
      border: 0px;
      outline: none;
    }
  }
  button {
    width: 100%;
    background: #ff734c;
    margin-top: 2.8rem;
    height: 3rem;
    color: white;
    border-radius: 100px;
    font-size: 1.2rem;
    border: 0px;
    outline: none;
  }
  .change {
    width: 100%;
    font-size: 1.2rem;
    text-align: center;
    margin-top: 2.14rem;
    color: #71797f;
  }
  .get {
    color: #71797f;
  }
  ::-webkit-input-placeholder {
    /* WebKit browsers */
    color: rgb(195, 195, 195);
  }
}
.nav {
  position: absolute;
  background: white;
  right: 10px;
  top: 3rem;
  font-size: 14px;
  border: 1px solid #e9ecf0;
  border-radius: 0.286rem;
  box-shadow: 0 4px 12px 0 #e9ecf0;
}
.nav .iconfont {
  line-height: normal;
  display: inline-block;
  font-size: 1rem;
  margin-right: 0.4rem;
}
.nav li {
  height: 3rem;
  line-height: 3rem;
  padding: 0rem 0.85rem;
}
.nav::before {
  content: "";
  width: 6px;
  height: 6px;
  background:white;
  position: absolute;
  transform: rotate(45deg);
  border-left: 1px solid #e9ecf0;
  border-top: 1px solid #e9ecf0;
  top:-5px;
  right:15px;
}
.nav-link{
  text-decoration: none;
  color: black;
}
.icon-left{
  display: inline;
}
</style>

<script>
export default {
  data () {
    return {
      msg: 1,
      isActive:false
    }

  },
  methods: {
    change () {
       this.$router.go(-1);
    },
     display(){
       this.isActive=!this.isActive
    }
  }
}
</script>